<template>
	<div
		class='step'
		:class="index === length ? '' : 'border'"
	>
		<div class="left">{{index}}</div>
		<div class="right">
			<div class="title">{{title}}</div>
			<slot />
		</div>
	</div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      required: true
    },
    length: {
      type: Number,
      required: true
    },
    title: {
      type: String,
      required: true
    },
  },
}
</script>

<style lang='scss' scoped>
.step {
  display: flex;

  &.border::after {
    position: absolute;
    top: 80px;
    left: 10px;
    width: 1px;
    height: calc(100% - 70px);
    content: '';
    border-left: 2px dashed #eff3f3;
  }

  .left {
    position: relative;
    padding-right: 50px;
    font-size: 50px;
    color: $primary1;
  }

  .right {
    overflow-x: auto;
    overflow-y: hidden;

    .title {
      margin-bottom: 34px;
      color: $color2;
    }
  }
}
</style>
